<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 练习：1.圆形   2.正三角形
			思路1: 宽高与边框倒角一致
			思路2：div#triangle   css中  抓到div    【斜线】
			                      左边框：50像素实线红色
								 右边框：50像素实线黄色
			   				    下边框：50像素实线黑色
								注意：先别加宽高    transprent 透明色
			*/
		   div#circle{
			   width: 400px;
			   height: 400px;
			   border: 2px solid pink;
			   border-radius: 50%;
			   /* 边框阴影 box-shadow*/
			   box-shadow: 10px 10px 50px 50px #aa55ff ;
			   
		   }
		   div#triangle{
			   width: 0;
			   /* border-left: 50px solid transparent;
			   border-right:50px solid transparent;
			   border-bottom: 50px solid black; */
			   /* 两行：到三角，蓝色，透明度 .3
			   提醒：所有边框：50px solid transparent
			        上边框颜色改为蓝色 0，0，255
			   */
			   border: 50px solid transparent;
			   border-top-color: rgba(0,0, 255, .3);
			   
		   }
		   /* outline  边框轮廓   只针对input元素*/
		   input{
				outline: 0;
		   }
		     /* 实际应用：通配选择器  去掉轮廓
			 *{ontline：0；}
			 */
		   
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text" />
	</body>
</html>
